<template>
  <div>
    <van-nav-bar title="用戶信息" />

    <div class="userBox">
      <div class="Top">
        <van-image
          round
          width="3rem"
          height="3rem"
          :src="require('@/assets/img/01.jpg')"
        />
        <div class="userInfo">
          <div>用戶：张靖宇</div>
          <div>電話：17603865066</div>
          <div>等級：金牌嫖客</div>
        </div>
      </div>
      <van-grid :column-num="4">
        <van-grid-item
          v-for="(item,index) in functions" @click="goinfo(item)"
          :key="index"
          :icon="item.icon"
          :text="item.name"
        />
      </van-grid>
      <van-collapse v-model="activeName" accordion style="margin-top:10px">
        <van-collapse-item title="修改信息" name="1">修改账户12密码</van-collapse-item>
        <van-collapse-item title="我上传的视频" name="2">我的121</van-collapse-item>
        <van-collapse-item title="每月结算" name="3">内容121</van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "userInfo",
  components: {},
  data() {
    return {
        activeName:0,
      functions: [
        { name: "收藏", icon: "star-o" ,url:'test'},
        { name: "订阅", icon: "thumb-circle-o",url:'backgrounds' },
        { name: "足迹", icon: "clock-o" ,url:"slots"},
        { name: "钱包", icon: "after-sale",url:'wangeditor' },
        { name: "会员", icon: "contact" },
        { name: "同城", icon: "wap-home-o" },
        { name: "下载", icon: "flag-o" },
        { name: "退款", icon: "cash-back-record" },
      ],
    };
  },
  methods:{
    goinfo(item){
      if(item.url)this.$router.push(item.url)
    }
  },
};
</script>

<style lang="scss" scoped>
.userBox {
  .Top {
    padding: 20px;
    display: flex;
    .userInfo {
      font-size: 18px;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  .van-grid-item{
    border: 1px solid rgb(228, 227, 227);
  }
}
</style>